<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<header th:fragment="nav">
    <div class="container" style="margin-top: 5px;">
        <nav class="navbar navbar-default well-sm" style="padding-left: 0px;" role="navigation">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse">
                        <span class="sr-only">切换导航</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>

                    <a class="navbar-brand" href="index.html" th:href="@{/book/index}">书城</a>
                </div>
                <div class="collapse navbar-collapse" id="example-navbar-collapse">
                    <ul class="nav navbar-nav pull-left">
                        <li class="active">
                            <a href="index.html" th:href="@{/book/index}">首页</a>
                        </li>

                        <li>
                        <li class="dropdown">
                            <a href="#" th:onclick="getFenlei()" class="dropdown-toggle">
                                图书类型
                                <b class="caret"></b>
                            </a>
                            <ul class="dropdown-menu" id="ulul">
<!--                                <li th:each="fenlei : ${fenleis}">-->
<!--                                    <a  th:href="@{/book/bookListByFenlei(fenlei=1)}" th:text="${fenlei.name}"></a>-->
<!--                                </li>-->
<!--                                <li>-->
<!--                                    <a href="books_list.html" th:href="@{/book/bookListByFenlei(fenlei=1)}">精选图书</a>-->
<!--                                </li>-->
<!--                                <li class="divider"></li>-->
<!--                                <li>-->
<!--                                    <a href="books_list.html" th:href="@{/book/bookListByFenlei(fenlei=2)}">推荐图书</a>-->
<!--                                </li>-->
<!--                                <li class="divider"></li>-->
<!--                                <li>-->
<!--                                    <a href="books_list.html" th:href="@{/book/bookListByFenlei(fenlei=3)}">特价图书</a>-->
<!--                                </li>-->

                            </ul>
                        </li>
                        </li>

                    </ul>
                    <div class="input-group col-md-3 pull-right" style="positon:relative;padding: 7px;">
                        <input id="searchBook" type="text" class="form-control" placeholder="请输入图书名" />


                        <script type="text/javascript">
                            function getFenlei() {
                                $.ajax({
                                    url:contextPath+"/fenlei/list",
                                    method:"get",
                                    async:true,
                                    success:function (data) {
                                        var html = "";
                                        for(var i=0;i<data.length;i++){ //遍历data数组
                                            var fenlei = data[i];
                                        // <a  th:href="@{/book/bookListByFenlei(fenlei=1)}" th:text="${fenlei.name}"></a>
                                            html +="<li><a href='"+contextPath+"/book/bookListByFenlei?fenlei="+fenlei.id+"' class='infNews_wrod_a'>"+fenlei.name+"</a></li>";
                                        }
                                        html+="<li class=\"divider\"></li>"
                                        $("#ulul").html(html); //在html页面id=ulul的标签里显示html内

                                        $('.dropdown-toggle').dropdown()

                                    },
                                    fail: function (err) {
                                        alert(err)
                                    }
                                })
                            }
                            function aler() {
                                alert('您还没有登录，请先登录哦！');
                                $('#loginModal').modal('show');
                            }
                            function f() {
                                var name=$("#searchBook").val();
                                location.href=contextPath+"/book/search?name="+name;

                                // var request = new XMLHttpRequest();
                                // request.open("GET",url,false)
                                // request.send(null)

                                // alert(name);

                                // $("#bookList").load(contextPath + "/book/search2",{"name" : name})

                                // $.ajax({
                                //
                                //     data:{"name":name},
                                //     url:  contextPath+"/book/search?name="+name,
                                //     contentType: "application/x-www-form-urlencoded; charset=UTF-8",
                                //     method:"get"
                                //
                                // })
                            }
                        </script>
                        <span class="input-group-btn">

<!--                            th:href="@{/book/search(name=)}"-->
                            <a id="sss"  onclick="f()">

                                <button class="btn btn-info btn-search">
					            	<span class="glyphicon glyphicon-search"></span>
					            </button>
                            </a>

                        </span>
                    </div>




                    <ul class="nav navbar-nav pull-left">
                        <li th:if="${session.user != null}">
                            <a href="order_list.html" th:href="@{/order/list}">我的订单</a>
                        </li>
                        <li th:if="${session.user == null}">
                            <a href="#"  onclick="aler()">我的订单</a>
                        </li>
                        <li th:if="${session.user != null}">
                            <a href="cart.html" th:href="@{/cart/list}"><span class="glyphicon glyphicon-shopping-cart"> </span>我的购物车</a>
                        </li>
                        <li th:if="${session.user == null}">
                            <a href="#" onclick="aler()"><span class="glyphicon glyphicon-shopping-cart"> </span>我的购物车</a>
                        </li>
                        <li th:if="${session.user == null}">
                            <a href="#" data-toggle="modal" data-target="#loginModal">登录</a>
                        </li>
                        <li th:if="${session.user == null}">
                            <a href="#" data-toggle="modal" data-target="#register">注册</a>
                        </li>
                        <li th:if="${session.user != null}">
                            <a href="javascript:void(0)" th:text="${session.user.username}">用户名</a>
                        </li>
                        <li th:if="${session.user != null}">
                            <a href="index.html" th:href="@{/user/logout}">安全退出</a>
                        </li>

                    </ul>

                </div>
            </div>
        </nav>
    </div>
</header>



